<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>h函数</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script>
      const { render, h, Text, Fragment } = Vue
      // render(h('h1', {}, 'some title', '1111'), document.getElementById('app'))

      // const VueComponent = {
      //   props: {
      //     address: String
      //   },
      //   render() {
      //     return h('p', [this.address, this.$attrs.a, this.$attrs.b])
      //   }
      // }
      // render(h(VueComponent, { address: '霍营地铁', a: 1, b: 2 }), document.getElementById('app'))

      const MyComponent = {
        props: {
          address: String
        },
        render() {
          return h('span', this.address)
        }
      }

      const VueComponent = {
        data() {
          return {
            flag: false
          }
        },
        render() {
          return h('div', [
            h('button', { onClick: () => (this.flag = !this.flag) }, '切换渲染'),
            h(MyComponent, { address: this.flag ? '地球' : '月球' })
          ])
        }
      }

      render(h(VueComponent), document.getElementById('app'))
    </script>
  </body>
</html>
